﻿<template>
	<div>
		<header id="navigator">
			<div>
				<div class="logo-icon">
					<a href="#" style="cursor: pointer;">
						<img class="logo" src="../../../static/z39pc/images/logo.png" height="45">
					</a>
				</div>
			</div>

			<div class="user-info" v-show="timeUserInfo">
				<el-dropdown trigger="click">
					<span class="el-dropdown-link userinfo-inner"><img :src="userImg||'//cdns.7dtime.com/z39/images/default.jpg'" style="margin-right: 10px;"/> {{userName}}</span>
					<el-dropdown-menu slot="dropdown" style="margin: 5px 0;border: 1px solid #d1dbe5;box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.12);padding: 6px 0;z-index: 10;position: absolute;top: 0;left: 0;min-width: 100px;box-sizing: content-box;">
						<el-dropdown-item @click.native="doMyInfo" style="padding: 0 10px;">我的消息</el-dropdown-item>
						<el-dropdown-item @click.native="doSetting" style="padding: 0 10px;">设置</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout" style="padding: 0 10px;">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<!--<img v-bind:src="userImg||'../../../static/z39pc/images/_large_avatar155568.png'" />
				<span>{{userName}}</span>-->
			</div>
			<div class="user-login-btn" @click="showLoginDialog()" v-show="!timeUserInfo">
				登录
			</div>
			<div class="nav-list">
				<ul>
					<li :class="currentRouteName=='任务'?'active':''">
						<router-link to="task" tag="a">任务</router-link>
					</li>
					<li :class="currentRouteName=='日报'?'active':''">
						<router-link to="note" tag="a">日报</router-link>
					</li>
					<li :class="currentRouteName=='博客'?'active':''">
						<router-link to="blog" tag="a">博客</router-link>
					</li>
					<li :class="currentRouteName=='需求和建议'?'active':''">
						<router-link to="needAndAdvice" tag="a">需求和建议</router-link>
					</li>
					<li >
						<a target="_black" href="https://7dtime.com/static/pro52SJRZ/">功能</a>
					</li>
					<li >
						<a target="_black" href="https://7dtime.com/static/api/">开放接口</a>
					</li>
					<li>
						<a target="_black" href="https://7dtime.com/static/mdteach/">教程</a>
					</li>
					<li>
						<router-link to="task" tag="a">档案库</router-link>
					</li>
					<li :class="currentRouteName=='市场'?'active':''">
						<router-link to="market" tag="a">市场</router-link>
					</li>
					<!--<li >
						<router-link to="task" tag="a" >价格</router-link>
					</li>-->
					<!--<li>
						<router-link to="task" tag="a">大冒险</router-link>
					</li>-->
					<!-- 
					<li >
						<router-link to="task" tag="a" >学习</router-link>
					</li>
					<li >
						<router-link to="task" tag="a" >公司</router-link>
					</li>
					<li >
						<router-link to="task" tag="a" >合作</router-link>
					</li>
					<li >
						<router-link to="task" tag="a" >经典</router-link>
					</li>
					<li >
						<router-link to="task" tag="a" >群组</router-link>
					</li>-->
				</ul>
			</div>

		</header>
		<login-dialog ref="loginDialog"></login-dialog>
	</div>
</template>
<script>
	import loginDialog from './login.vue'
	import api from '../../api';
	import { taskAndTag } from "../../common/mixin";
	import { mixinPc } from "../../common/mixinPc";
	import _ from "underscore";
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		name: 'headerNav',
		data() {
			return {
				userName: '',
				userImg: '',
				currentRouteName:'',
				timeUserInfo: JSON.parse(localStorage.getItem('timeUserInfo'))
			}

		},
		components: {
			'login-dialog': loginDialog
		},
		computed: {
			...mapState({
				uid: state => state.vux.uid,
				isLogin: state => state.vux.isLogin,
				sid: state => state.vux.sid,  //websocket id
				wsLogin: state => state.vux.wsLogin ,
				
			})
		},
		mixins: [taskAndTag, mixinPc],
		watch: {
			'uid': function() {
				var timeUserInfo = JSON.parse(localStorage.getItem('timeUserInfo'))
				if(timeUserInfo && timeUserInfo.uid) {
					this.userName = timeUserInfo.username;
					this.userImg = timeUserInfo.headimgurl;
				}
				this.timeUserInfo=timeUserInfo
			},
			'isLogin': function() {
				this.loginState = this.isLogin
			},
			"$route": function(to, from) {
				this.currentRouteName=this.$route.matched[0].name
			}
		},
		methods: {
			initPage: function() {
				if(this.timeUserInfo) {
					this.usertask(this.timeUserInfo.uid);
					this.userName = this.timeUserInfo.username;
					this.userImg = this.timeUserInfo.headimgurl;
				}
			},
			showLoginDialog: function() {
				this.$refs.loginDialog.loginDialogVisible = true;
			},
			doMyInfo:function() {
				this.showNotice('功能还未完成', 'warning');
			},
			doSetting:function() {
				this.showNotice('功能还未完成', 'warning');
			},
			logout: function() {
				this.$confirm('是否确认退出当前账号?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			       }).then(() => {
			       			this.$store.commit({ type: "z39/reset" });
							this.$store.commit({ type: "reset" });
							localStorage.removeItem('timeUserInfo');
							localStorage.removeItem('tagTmpSortArr');
							this.timeUserInfo=''
			            api.logout({}).then(data=>{
//							this.$store.commit({ type: "z39/reset" });
//							this.$store.commit({ type: "reset" });
//							localStorage.removeItem('timeUserInfo');
//							localStorage.removeItem('tagTmpSortArr');
//							this.timeUserInfo=''
						})
			        })
				
			},
			checkLogin:function(){
				api.checkLogin({}).then(data=>{
				  	if(data.errno!=0){
						this.$store.commit({ type: "reset" });
						localStorage.removeItem('timeUserInfo');
						localStorage.removeItem('tagTmpSortArr');
						this.timeUserInfo=''
				  	}
				})
			}
		},
		mounted() {
			this.checkLogin()
			this.currentRouteName=this.$route.matched[0].name
			this.initPage()
		}
	}
</script>

<style scoped="">
	* {
		/*margin: 0;
		padding: 0;
		list-style: none;
		box-sizing: border-box;*/
	}
	
	#navigator {
		height: 54px;
		z-index: 1000;
		box-shadow: none;
		color: #757575;
		position: fixed;
		width: 100%;
		background: #1d88e5;
		padding: 11px 30px;
		color: #fff;
	}
	
	#navigator .logo-icon {
		float: left;
	}
	
	#navigator .logo-icon img {
		height: 45px;
		margin-top: -6px;
		margin-left: 55px; /*-12px;*/
		vertical-align: middle;
	}
	
	#navigator .user-info {
		float: right;
		cursor: pointer;
	}
	
	#navigator .user-info img {
		height: 32px;
		width: 32px;
		border-radius: 2px;
		vertical-align: middle;
		box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.23);
	}
	
	#navigator .user-info span {
		font-size: 13px;
		margin: 0 20px 0 10px;
		color: #fff;
	}
	
	#navigator .user-login-btn {
		float: right;
		line-height: 32px;
		height: 32px;
		cursor: pointer;
		color: #fff;
		font-size: 15px;
	}
	
	#navigator .nav-list {
		width: 60%;
		margin: 0 auto;
		height: 32px;
		line-height: 32px;
	}
	
	#navigator .nav-list li {
		float: left;
		padding: 0 20px;
		font-size: 14px;
		margin: 0 5px;
	}
	
	#navigator .nav-list li a {
		color: #fff;
		text-decoration: none;
		cursor: pointer;
	}
	
	#navigator .nav-list li.active {
		background: #0a72cd;
		border-radius: 3px;
	}
</style>